<template>
    <div id="zxYeji">
        <div class="heightChart">
            <div class="title">来电记录</div>
            <div id="main2"></div>
        </div>

    </div>
</template>

<script>
    import echarts from 'echarts'
    import {getCallRecord} from "../../../network/home";

    export default {
        name: "zxYeji",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            }, 30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右下关闭')
            }
        },
        methods: {
            setEchart() {
                getCallRecord().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data)
                        let myChart = echarts.init(document.getElementById("main2"));

                        myChart.setOption({
                            xAxis: [{
                                type: 'category',
                                axisLine: {
                                    show: true
                                },
                                splitArea: {
                                    // show: true,
                                    color: '#f00',
                                    lineStyle: {
                                        color: '#f00'
                                    },
                                },
                                axisLabel: {
                                    color: '#89FCDE'
                                },
                                boundaryGap: false,
                                // data: ['1000', '1001', '1002', '1003', '1004', '1005', '1006', '1007', '1008', '1009', '1010',
                                //     '1011', '1012', '1013', '1014', '1015', '1016', '1017', '1018', '1019'],
                                data:res.data.name,
                            }],

                            yAxis: [{
                                type: 'value',
                                min: 0,
                                // max: 140,
                                splitNumber: 4,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: 'rgba(255,255,255,0.1)'
                                    }
                                },
                                axisLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: false,
                                    margin: 20,
                                    textStyle: {
                                        color: '#d1e6eb',

                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                            }],
                            tooltip: {
                                trigger: 'item',
                                formatter: "{b}：{c}"
                            },
                            series: [
                                {
                                    name: '来电记录率',
                                    type: 'line',
                                    // smooth: true, //是否平滑
                                    showAllSymbol: true,
                                    // symbol: 'image://./static/images/guang-circle.png',
                                    symbol: 'circle',
                                    symbolSize: 10,

                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: '#00ca95',
                                        },
                                        formatter: "{c}"
                                    },

                                    itemStyle: {
                                        color: "#00ca95",
                                        borderColor: "#fff",
                                        borderWidth: 2,
                                        shadowColor: 'rgba(0, 0, 0, .3)',
                                        shadowBlur: 0,
                                        shadowOffsetY: 2,
                                        shadowOffsetX: 2,
                                    },
                                    // tooltip: {
                                    //     show: false
                                    // },
                                    areaStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: 'rgba(0,202,149,0.3)'
                                            },
                                                {
                                                    offset: 1,
                                                    color: 'rgba(0,202,149,0)'
                                                }
                                            ], false),
                                            shadowColor: 'rgba(0,202,149, 0.9)',
                                            shadowBlur: 20
                                        }
                                    },
                                    data: res.data.value,
                                },
                            ]
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 340px;
        background: url("../../../assets/img/worktake/bottom.png");
        background-size: 610px 340px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color: #6AFF8B;
    }


    #main2 {
        width: 100%;
        height: 300px;
        box-sizing: border-box;
        padding-top: 50px;
    }
</style>
